#laya {
    background-color: #2b80d9;
    text-align: center;

    img {
        margin-top: -2px;
    }
}

#flash {
    background-color: #fbfaf7;

    .item-box {
        width: 80%;
        margin: 0 13vw;
        display: flex;
        justify-content: space-between;

        .left {
            width: 60%;

            h3 {
                font-size: 47px;
                color: #0078d7;
                font-weight: bolder;
                margin-top: 3vw;
            }

            h5 {
                font-size: 30px;
                color: #666666;
            }

            .show-box {
                display: flex;
                margin-top: 80px;
                flex-wrap: wrap;
                justify-content: space-around;

                .showItem {
                    display: flex;
                    margin-top: 15px;

                    .picture {
                        width: 60px;
                        height: 60px;
                        border-radius: 6px;
                        text-align: center;
                        background-color: #0078d7;

                        img {
                            margin-top: 2px;
                        }

                    }

                    .introduce {
                        margin-left: 14px;

                        .title {
                            color: #787877;
                            font-size: 19px;
                            font-weight: 400px;
                        }

                        .txt {
                            font-size: 14px;
                            margin-top: 2px;
                            width: 210px;
                            color: #a8a7a6;
                        }
                    }
                }

            }

        }

        .right {
            margin-top: 6vw;
        }

    }
}

#advantage .advantage-box {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 5vw;
    display: flex;

    .left {
        text-align: center;
        margin-top: 10vw;
        display: flex;
    }

    .right {
        width: 50%;

        h3 {
            font-size: 47px;
            color: #8fc31f;
            font-weight: bolder;
            margin-top: 3vw;
        }

        .list {
            .item {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                margin-top: 1vw;

                .icon {
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #8fc31f;

                    .iconfont {
                        font-size: 30px;
                        color: #fff;
                    }
                }

                .txt {
                    font-size: 14px;
                    color: #8a8a8a;
                }
            }
        }
    }
}

#family {
    background-color: #2b80d9;
    padding-top: 8vw;
    padding-bottom: 8vw;

    .family-box {
        width: 60%;
        margin: 0 auto;
        text-align: center;

        p {
            font-size: 40px;
            color: #ffff;
        }

        .show-box {
            display: flex;
            margin-top: 2vw;
            flex-wrap: wrap;
            color: #fff;
            justify-content: space-around;

            .showItem {
                display: flex;
                margin-top: 5vw;

                .picture {
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    border-radius: 8px;
                    text-align: center;
                    color: #0078d7;
                    background-color: #fff;

                    // img {
                    //     margin-top: 2px;
                    // }
                    .iconfont {
                        font-size: 50px;
                    }

                }

                .introduce {
                    margin-left: 3vw;
                    text-align: left;

                    .title {
                        font-size: 19px;
                        font-weight: 400px;
                    }

                    .txt {
                        font-size: 14px;
                        margin-top: 1vw;
                        width: 210px;
                    }
                }
            }

        }
    }
}

#game .game-box {
    width: 70%;
    padding-top: 6vw;
    padding-bottom: 6vw;
    margin: auto;

    .top {
        display: flex;
        justify-content: space-between;

        .title {
            font-size: 32px;
            color: #2a2929;
        }
    }

    .bottom {
        display: flex;
        margin-top: 3vw;

        .left {
            margin-right: 3vw;
            width: 40%;

            img {
                width: 100%;
                border-radius: 6px;
            }
        }

        .right {
            display: flex;
            flex-wrap: wrap;
            width: 60%;
            justify-content: space-between;
            align-items: center;

            .item {
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-right: 2vw;

                img {
                    width: 60px;
                }
            }
        }
    }
}

#friends {
    background-color: #c3c3c3;
    padding-top: 3vw;
    padding-bottom: 5vw;

    .friends-box {
        width: 70%;
        margin: 0 auto;

        .title {
            font-size: 30px;

            span {
                font-size: 11px;
                color: #5e5c5c;
                font-family: OSLight;
            }
        }

        .list {
            margin-top: 2vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item {
                width: 125px;
                height: 65px;
                // margin-right: 1vw;

                img {
                    border-radius: 3px;
                }
            }
        }
    }

}



@media screen and (max-width: 1280px) {}


@media screen and (max-width: 768px) {
    #flash .item-box {
        .left {
            width: 100%;

            h3 {
                font-size: 20px;
            }

            h5 {
                font-size: 15px;
            }

            .show-box {
                margin-top: unset;
            }
        }

        .right {
            display: none;
        }

    }

    #advantage .advantage-box {
        flex-direction: column;

        .right {
            width: 100%;

            h3 {
                font-size: 28px;
            }

            .list .item {
                .icon {
                    width: 30%;
                    height: auto;
                }
            }
        }
    }

    #family .family-box{
        p{
            font-size: 28px;
        }
    }

    #game .game-box {
        .top {
            .title {
                font-size: 16px;
            }
        }

        .bottom {
            display: flex;
            flex-direction: column;
            align-items: center;

            .left {
                width: 100%;
            }

            .right {
                margin-top: 3vw;
            }
        }
    }

}

@media screen and (max-width: 375px) {}